<template>
    <div class="List">
        <div class="List-header">
            <h4 class="List-header-Text">
                <span>我的动态</span>
            </h4>
            <div class="List-headerOptions"></div>
        </div>
        <div class="List-container">
            <div class="List-item">
                <div class="List-itemMeta">
                    <div class="ActivityItem-meta">
                        <span class="ActivityItem-metaTitle">关注了问题</span>
                        <span>11-16</span>
                    </div>
                </div>
                <div class="ContentItem">
                  <h2 class="ContentItem-title">
                      <div class="QuestionItem-title">
                          <a href="">可以把家里的猫送去猫咖打工吗？</a>
                      </div>
                  </h2>
                </div>
            </div>
            <div class="List-item">
                <div class="List-itemMeta">
                    <div class="ActivityItem-meta">
                        <span class="ActivityItem-metaTitle">关注了问题</span>
                        <span>11-16</span>
                    </div>
                </div>
                <div class="ContentItem">
                    <h2 class="ContentItem-title">
                        <div class="QuestionItem-title">
                            <a href="">你高中时最美好的一个瞬间是什么？</a>
                        </div>
                    </h2>
                </div>
            </div>
            <div class="List-item">
                <div class="List-itemMeta">
                    <div class="ActivityItem-meta">
                        <span class="ActivityItem-metaTitle">关注了问题</span>
                        <span>11-12</span>
                    </div>
                </div>
                <div class="ContentItem">
                    <h2 class="ContentItem-title">
                        <div class="QuestionItem-title">
                            <a href="">如何评价2020年天猫双十一总成交额达4982亿元？如何解读今年的增幅？</a>
                        </div>
                    </h2>
                </div>
            </div>
            <div class="List-item">
                <div class="List-itemMeta">
                    <div class="ActivityItem-meta">
                        <span class="ActivityItem-metaTitle">关注了问题</span>
                        <span>11-12</span>
                    </div>
                </div>
                <div class="ContentItem">
                    <h2 class="ContentItem-title">
                        <div class="QuestionItem-title">
                            <a href="">多益网络再发声明称，员工自降月薪 10% 实际人均提高年薪 10 万，如何看待这一波操作？</a>
                        </div>
                    </h2>
                </div>
            </div>
            <div class="List-item">
                <div class="List-itemMeta">
                    <div class="ActivityItem-meta">
                        <span class="ActivityItem-metaTitle">关注了问题</span>
                        <span>11-12</span>
                    </div>
                </div>
                <div class="ContentItem">
                    <h2 class="ContentItem-title">
                        <div class="QuestionItem-title">
                            <a href="">三代火影跟三代土影这两个老头谁更强？</a>
                        </div>
                    </h2>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Dongtai"
    }
</script>


<style scoped>
    .List-header{
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        align-items: center;
        height: 50px;
        margin: 0 20px;
        border-bottom: 1px solid #f6f6f6;
        box-sizing: border-box;
    }
    .List-header-Text{
        font-weight: 600;
        margin: 0;
    }
    h4{
        display: block;
        margin-block-start: 1.33em;
        margin-block-end: 1.33em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }
    .List-headerOptions{
        display: flex;
        -webkit-box-pack: center;
        justify-content: center;
        align-self: center;
        font-size: 14px;
    }
    .List-item{
        position: relative;
        padding: 16px 20px;
    }
    .List-itemMeta{
        margin-bottom: 10px;
        color: #8590a6;
    }
    .ActivityItem-meta{
        display: flex;
        color: #8590a6;
    }
    .ActivityItem-metaTitle{
        -webkit-box-flex: 1;
        flex: 1 1;
    }

    .ContentItem-title{
        margin-top: -4px;
        margin-bottom: -4px;
        line-height: 1.6;
        color: #121212;
        font-size: 18px;
        font-weight: 600;
    }
    .QuestionItem-title{
        display: flex;
        align-items: center;
    }
    .QuestionItem-title{
        text-decoration: none;

    }
    .QuestionItem-title a{
        color: #121212;
    }
    .QuestionItem-title a:hover{
        color: #186998;
    }


</style>